import { Component } from 'react';
import { Modal, List, Avatar } from 'antd';

class CommentModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            visible: props.visible,
            data: props.components,
        };
    }

    static getDerivedStateFromProps = (nextProps, prevState) => {
        return nextProps;
    }

    handleCancel = (e) => {
        this.props.hideComment( 1 );
    }

    render() {
        const data = this.props.comments;
        return (
            <span>
                <Modal
                        title="评论内容"
                        visible={this.state.visible}
                        onCancel={this.handleCancel}
                        width={ 680 }
                        footer={ null }
                    >
                    <List
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                            title={item.name}
                            description={item.body}
                            />
                        </List.Item>
                        )}
                    />
                </Modal>
            </span>
        );
    }
}

export default CommentModal;